<!--
 /**
 * Author: hongChengHao
 * Date: 2022-08-11 10:13
 * Desc: 影片商品支付
 */
-->
<template>
  <view class="mall-shop">
    <view class="flex">
      <zm-image
        :src="obj.imageUrl"
        custom-style="width:134rpx;height:134rpx;margin-right:24rpx"
      ></zm-image>
      <view class="introduce">
        <view class="fb fs30">{{ obj.name || '--' }}</view>
        <view class="mall-shop__box">
          <price
            :price="obj.asPrice || '--'"
            unit-size="24"
            price-size="36"
            custom-class="fb"
            color="#FFB415"
          ></price>
          <view class="fs24 num">数量：{{ obj.number || '--' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  export default {
    name: 'ComponentName',
    components: { ZmImage, Price },
    props: {
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    created() {},
    mounted() {},
    methods: {}
  }
</script>
<style lang="scss" scoped>
  .mall-shop {
    padding: 30rpx 30rpx 10rpx;
    background: #fff;
    box-sizing: border-box;
    .introduce {
      flex: 1;
      display: flex;
      flex-direction: column;
      .num {
        color: #888;
      }
    }
    &__box {
      margin-top: 35rpx;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
  }
</style>
